<template>
  <div class="not-found-page min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
    <div class="text-center">
      <n-icon size="128" type="error" class="mb-6" />
      <h1 class="text-6xl font-bold mb-4">404</h1>
      <h2 class="text-2xl font-semibold mb-4">页面不存在</h2>
      <p class="text-gray-500 dark:text-gray-400 mb-8 max-w-md mx-auto">
        抱歉，您访问的页面不存在或已被删除。请检查您的URL是否正确，或返回首页。
      </p>
      <n-button type="primary" @click="$router.push('/')">
        <template #icon>
          <n-icon size="18">
            <HomeOutline />
          </n-icon>
        </template>
        返回首页
      </n-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { HomeOutline } from '@vicons/ionicons5'
</script>

<style scoped>
.not-found-page {
  padding: 1rem;
}
</style>
